<template>
  <div class="vue-box sbot" v-if="m">
    <div class="c-panel">
      <div class=" my-panel">
        <el-descriptions :column="4" size="medium" border>
          <template slot="title">
            <span class="my-title">我的信息</span>
          </template>
          <template slot="extra">
            <el-button type="primary" size="small" @click="update()" plain>操作</el-button>
          </template>
          <el-descriptions-item>
            <template slot="label">
              <i class="el-icon-user-solid"></i>
              用户名
            </template>
            {{ m.name }}
          </el-descriptions-item>
          <el-descriptions-item>
            <template slot="label">
              <i class="el-icon-user"></i>
              昵称
            </template>
            {{ m.nickName }}
          </el-descriptions-item>
          <el-descriptions-item>
            <template slot="label">
              头像
            </template>
            <img :src="m.avatar" />
          </el-descriptions-item>
          <el-descriptions-item>
            <template slot="label">
              <i class="el-icon-mobile-phone"></i>
              手机号
            </template>
            {{ m.phone }}
          </el-descriptions-item>
          <el-descriptions-item>
            <template slot="label">
              角色
            </template>
            <el-tag size="small">{{ m.roleName }}</el-tag>
          </el-descriptions-item>
          <el-descriptions-item>
            <template slot="label">
              登录IP
            </template>
            {{ m.loginIp }}
          </el-descriptions-item>
          <el-descriptions-item>
            <template slot="label">
              登录次数
            </template>
            {{ m.loginCount }}
          </el-descriptions-item>
          <el-descriptions-item>
            <template slot="label">
              <i class="el-icon-tickets"></i>
              备注
            </template>
            {{ m.note }}
          </el-descriptions-item>
        </el-descriptions>
      </div>
      <div class=" my-panel">
        <span class="my-title">
          我的服务
          <el-tooltip class="item" effect="light" content="切换服务" placement="top-start" :hide-after="500">
            <i class="el-icon-question"></i>
          </el-tooltip>
        </span>
        <div class="my-server">
          <el-button type="primary" size="medium " v-for="item in sa.$sys.getCurAllSer()" :disabled="item.id === curs.id" @click="change(item.id)">
            <div class="my-server-btn">
              <span>{{ item.name }}·{{ item.code }}</span>
              <el-tag v-if="item.id === curs.id">当前</el-tag>
            </div>
          </el-button>
        </div>
      </div>
    </div>
  </div>
</template>

<script>
import init from '@/csl-init';
export default {
  name: 'my-info-desc',
  data() {
    return {
      m: null,
      curs: null,
    }
  },
  created: function () {
    this.curs = sa.$sys.getCurSer()
    this.getInfo()
  },
  methods: {
    // 获取
    getInfo() {
      sa.ajax('/sso/my/getById', function (res) {
        this.m = res.data;
      }.bind(this), {
        type: "get"
      });
    },
    // 变更
    update() {
      sa.showModel('变更', () => import('./update'), this.m);
    },
    // 切换服务
    change(id) {
      if (this.curs.id !== id) {
        // 清空权限缓存
        sa.$sys.removeCurm()

        // 当前服务
        sa.$sys.setCurSid(id)

        // 开始初始化
        init();

        // 刷新菜单
        let taskId = setInterval(() => {
          if (sa.$sys.getCurm()) {
            this.skipToDest()
            clearInterval(taskId)
          }
        }, 500)
      }
    },
    // 跳转
    skipToDest() {
      this.$router.push({
        path: sa.$sys.getCurSer().url,
        name: sa.$sys.getCurSer().viewName
      })
    }
  },

}
</script>

<style scoped>
img {
  width: 20px;
  height: 20px;
}

::v-deep .el-descriptions__header {
  margin-bottom: 5px;
}

.my-panel {
  display: flex;
  justify-content: start;
  flex-direction: column;
  margin: 2em 0 0 0;
}

.my-title {
  display: flex;
  justify-content: flex-start;
  align-items: center;
  text-align: center;
  font-size: larger;
  font-weight: 600;
  margin: 0 0 1em 0;

  p {
    font-size: xx-small;
    font-weight: 100;
    color: rgb(194, 194, 194);
  }
}

.my-server {
  display: flex;
  justify-content: start;
  align-items: center;
}

.my-server-btn {
  display: flex;
  justify-content: center;
  align-items: center;
  text-align: center;
  font-size: xx-large;
  width: 280px;
  height: 50px;

  span {
    padding-right: 10px;
  }
}
</style>
